<!-- 详情 -->
<template>
  <div class="drawer-layout">
    <el-drawer :title="detailTitle" :visible.sync="drawer" @closed="closedinvitation" size="60%" :wrapperClosable="false">
      <div class="layout" style="position: relative" v-loading="loading">
        <div class="info-box" style="display: flex;justify-content: space-between;">
          <div>
            <div style="display: flex;margin-bottom: 20px;">
              <el-image src="https://mj-1320609740.cos.ap-nanjing.myqcloud.com/2023-11/29/090032_27092.jpeg"
                style="height: 50px;width: 50px;border-radius: 5px;"></el-image>
              <div style="margin-left: 20px;line-height: 26px;font-size: 14px;">
                
                <div style="display: flex;">
                  <div>用户昵称</div>
                  <div style="margin-left: 20px;"><span style="color:#626262">联系方式：</span>18100000000</div>
                </div>
                <div style="display: flex;">
                  <div class="idbox">ID:1234566</div>
                  <!-- <div style="margin-left: 20px;">联系方式：18100000000</div> -->
                </div>
                
              </div>
            </div>
          </div>
          <div>
            审核状态： <span style="color:#E6A23C;font-weight: 600;">待审核</span>
            <!-- <span style="color:#67C23A;font-weight: 600;">审核通过</span>
                    <span style="color:#F56C6C;font-weight: 600;">审核失败</span> -->
          </div>
        </div>
        <div class="blockquote-box">充值信息</div>
        <div class="info-box">
          <div style="display: flex;">
            <div class="infodiv">
              <div>充值方式：线下充值</div>
              <div>充值金额：￥800.00</div>
              <div>充值时间：2023-01-01 12:12:12</div>
            </div>
            <div class="infodiv">
              <div>充值方式：线下充值</div>
              <div style="display: flex;">充值凭证：<el-image
                  src="https://mj-1320609740.cos.ap-nanjing.myqcloud.com/2023-11/29/090032_27092.jpeg"
                  style="width: 120px;height: 80px;border-radius: 4px;"></el-image></div>
            </div>
          </div>
        </div>

      </div>
    </el-drawer>
  </div>
</template>
<script>
// 引入
import LogoUpload from "@/components/FileUpload";
export default {
  name: "detail",
  props: [
    "detailTitle",
    "status",
    "regionList",
    "groupingList",
    "TagCategoryAll",
    "gradeList",
  ],
  components: {
    LogoUpload,
  },
  data() {
    return {
      loading: false,
      id: "",
      drawer: true,
      detailtitle: "",
      activeName: "first",
    }
  },
  mounted() { },
  methods: {
    // 关闭添加抽屉
    closedinvitation() {
      this.$parent.closedetail();
    },

  },
};
</script>
<style lang="scss">
.drawer-layout {

  /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
  .el-drawer__body {
    overflow: auto;
  }

  /*2.隐藏滚动条，太丑了*/
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }

  .el-drawer__header {
    background-color: #409eff;
    color: #ffffff;
    padding: 10px 20px;
    margin-bottom: 10px;
  }

  .el-tabs--card {
    height: calc(100vh - 110px);
    /* overflow-y: auto; */
  }

  .el-tab-pane {
    height: calc(100vh - 110px);
    overflow-y: auto;
  }

  .el-tabs__header {
    padding-left: 50px;
    margin: 0;
  }

  .el-tabs__item {
    padding: 0 40px;
  }

  .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    z-index: 1;
  }

  .el-alert--warning.is-light .el-alert__description {
    color: #c77b04;
    font-size: 14px;
  }

  .form-box-item {
    .el-form-item__label {
      font-size: 14px;
      font-weight: 500;
      // width: 96px;
    }

    .el-input {
      width: 250px;
    }
  }
}
</style>
<style lang="scss" scoped>
.blockquote-box {
  border-left: 4px solid #409eff;
  padding-left: 16px;
  margin: 16px 0;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  font-size: 16px;
}

.info-box {
  margin: 0 20px 20px 20px;
}

.infodiv {
  color: #626262;
  font-size: 14px;
  width: 50%;

  div {
    margin-bottom: 20px;
  }

}

.idbox {
  border: 1px solid #cecece;
  border-radius: 3px;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #838281;
}
</style>